<%@ page import="com.onlineOrder.bean.menuList" %>
<%@ page import="java.util.List" %>
<%@ page import="com.onlineOrder.webAction.loginServlet" %><%--
  Created by IntelliJ IDEA.
  User: 12296
  Date: 2022/3/8
  Time: 14:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>在线点餐</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>

    <link rel="stylesheet" href="./style/dialog.css">
    <style>
        b {
            text-align: justify;
            text-justify: inter-ideograph;
        }

        input {
            border-radius: 10px;
        }

        button {
            /*border-style:hidden;*/
            border-style: hidden;
            border-color: #ededed;
        }

        th {
            text-align: center;
        }

        ul, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            cursor: pointer;
            text-decoration: none;
        }

        a:link {
            text-decoration: none;
        }

        img {
            vertical-align: middle;
        }

        .btn-numbox {
            overflow: hidden;
            margin-top: 20px;
        }

        .btn-numbox li {
            float: left;
        }

        .btn-numbox li .number,
        .kucun {
            display: inline-block;
            font-size: 12px;
            color: #808080;
            vertical-align: sub;
        }

        .btn-numbox .count {
            overflow: hidden;
            margin: 0 16px 0 -20px;
        }

        .btn-numbox .count .num-jian,
        .input-num,
        .num-jia {
            display: inline-block;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            border: 1px solid #e6e6e6;
        }

        .btn-numbox .count .input-num {
            width: 58px;
            height: 26px;
            color: #333;
            border-left: 0;
            border-right: 0;
        }

        span, input {
            border-radius: 15px;

        }

        input {
            /* border-style: hidden; */
        }

    </style>
</head>
<body>
<script type="text/javascript">
    function userReport(shopID) {
        var ok = window.confirm("确认投诉？");
        if (ok) {
            document.location.href = "<%=request.getContextPath()%>/userMenuReport?shopID=" + shopID;
        }
    }

    function userLike(menus) {
        document.location.href = "<%=request.getContextPath()%>/userMenuLike?menu=" + menus;
    }
</script>
<div class="container row=10">
    <table class="table table-striped table-hover"
           data-pagination="true" data-side-pagination="client" data-page-size="3">

        <tbody>
        <tr>
            <th style="width: 200px;">菜品</th>
            <th>详情</th>
            <td>
                <form method="post" action="<%=request.getContextPath()%>/userMenuSearch"><input type="text"
                                                                                                 name="searchResult"
                                                                                                 placeholder="菜品名称/商家名称"><input
                        type="submit" value="🔍"></form>
            </td>
        </tr>
        <%
            List<menuList> menuLists = (List<menuList>) request.getAttribute("menuList");
            for (menuList menuList : menuLists) {
        %>
        <tr>
            <td><img src="<%=menuList.getImg()%>" alt="" style="width: 170px; height: 170px;"></td>
            <td>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>名称:</b><%=menuList.getMenus()%><br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>单价:</b><%=menuList.getPrice()%><b>￥</b><br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>餐厅：</b><%=menuList.getShopName()%><br><br>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>电话:</b><%=menuList.getShopPhone()%><br>
            </td>
            <td>

                <ul class="btn-numbox">
                    <li><span class="number">数量</span></li>
                    <li>
                        <ul class="count">
                            <li><span id="num-jian<%=menuList.getIdPic()%>" class="num-jian">-</span></li>
                            <li><span id="num-jia<%=menuList.getIdPic()%>" class="num-jia">+</span><br></li>
                            <li>
                                <form method="post" action="<%=request.getContextPath()%>/userMenuBuy">

                                    <input type="text" class="input-num" id="input-num<%=menuList.getIdPic()%>" name="menuNum" value="0"/>
                                    <input type="text" name="menuName" value="<%=menuList.getMenus()%>" style="display: none">
                                    <input type="text" name="menuPrice" value="<%=menuList.getPrice()%>" style="display: none">
                                    <input type="text" name="shopName" value="<%=menuList.getShopName()%>" style="display: none">
                                    <input type="text" name="shopID" value="<%=menuList.getShopID()%>" style="display: none">
                                    <input type="text" name="shopPhone" value="<%=menuList.getShopPhone()%>" style="display: none"><br>
                                    <input type="submit" value="添加" style="position: relative;top: 15px;left: -50px; " class="btn btn-primary">


                                </form>
                            </li>

                        </ul>
                        <script type="text/javascript">
                            var num_jia<%=menuList.getIdPic()%> = document.getElementById("num-jia<%=menuList.getIdPic()%>");
                            var num_jia<%=menuList.getIdPic()%>n = document.getElementById("num-jian<%=menuList.getIdPic()%>");
                            var input_num<%=menuList.getIdPic()%> = document.getElementById("input-num<%=menuList.getIdPic()%>");

                            num_jia<%=menuList.getIdPic()%>.onclick = function () {

                                input_num<%=menuList.getIdPic()%>.value = parseInt(input_num<%=menuList.getIdPic()%>.value) + 1;
                            }

                            num_jia<%=menuList.getIdPic()%>n.onclick = function () {

                                if (input_num<%=menuList.getIdPic()%>.value <= 0) {
                                    input_num<%=menuList.getIdPic()%>.value = 0;
                                } else {

                                    input_num<%=menuList.getIdPic()%>.value = parseInt(input_num<%=menuList.getIdPic()%>.value) - 1;
                                }
                            }
                        </script>
                        <span id="setValue"></span>
                    </li>
                </ul>

                <form style="position: relative;top: -5px;left: 90px; " method="post">
                    <input type="submit" value="投诉" class="btn btn-danger"
                           onclick="userReport(<%=menuList.getShopID()%>)"><br><br>
                </form>
            </td>

        </tr>
        <%
            }
        %>
        </tbody>
    </table>

</div>
</body>
</html>